<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
        <el-collapse  v-model="activeNames" accordion>
          <el-collapse-item title="图层" name="1">
            <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
              <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="默认样式" name="2">

            <el-form-item v-if="configData.chartOption.fontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.fontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.letterSpacing!==undefined" label="字体间距">
              <el-slider v-model="configData.chartOption.letterSpacing" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.fontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.fontColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.fontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.fontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.fontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.fontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.borderWidth!==undefined" label="边框宽度">
              <el-slider v-model="configData.chartOption.borderWidth" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.borderColor!==undefined" label="边框颜色">
              <el-color-picker v-model="configData.chartOption.borderColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item label="背景设置">
              <el-radio-group v-model="configData.chartOption.normalBGFlag">
                <el-radio label="color">背景颜色</el-radio>
                <el-radio label="img">背景图片</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.backgroundColor!==undefined && configData.chartOption.normalBGFlag == 'color'" label="背景颜色">
              <el-color-picker v-model="configData.chartOption.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.normalBGFlag == 'img'" label="背景图片">
              <image-gallary @getImg="getNormalBg"></image-gallary>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.textAlign!==undefined" label="文本对齐方式">
              <el-select v-model="configData.chartOption.textAlign" placeholder="请选择">
                <el-option label="居左" value="left"></el-option>
                <el-option label="居中" value="center"></el-option>
                <el-option label="居右" value="right"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.direction!==undefined" label="方向">
              <el-radio-group v-model="configData.chartOption.direction">
                <el-radio label="horizontal">横向</el-radio>
                <el-radio label="vertical">纵向</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="选中样式" name="3">

            <el-form-item v-if="configData.chartOption.selectedFontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.selectedFontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedLetterSpacing!==undefined" label="字体间距">
              <el-slider v-model="configData.chartOption.selectedLetterSpacing" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

             <el-form-item v-if="configData.chartOption.selectedFontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.selectedFontColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedFontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.selectedFontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedFontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.selectedFontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedBorderWidth!==undefined" label="边框宽度">
              <el-slider v-model="configData.chartOption.selectedBorderWidth" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedBorderColor!==undefined" label="边框颜色">
              <el-color-picker v-model="configData.chartOption.selectedBorderColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item label="背景设置">
              <el-radio-group v-model="configData.chartOption.selectedBGFlag">
                <el-radio label="color">背景颜色</el-radio>
                <el-radio label="img">背景图片</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedBackgroundColor!==undefined && configData.chartOption.selectedBGFlag == 'color'" label="背景颜色">
              <el-color-picker v-model="configData.chartOption.selectedBackgroundColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.selectedBGFlag == 'img'" label="背景图片">
              <image-gallary @getImg="getSelectedBg"></image-gallary>
            </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="交互事件" name="4">
            <draggable
              
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >  
            <div style="display:flex">
              <el-form-item label="Tab页"></el-form-item>
              <el-form-item label="组件" style="margin-left:35px"></el-form-item>
              <!-- <el-form-item label="动画"></el-form-item> -->
            </div>
            
            
              <div v-for="(item, index) in configData.chartOption.bindingObjs" :key="index" class="select-item" >
                
                 <el-input v-model="item.bindid" placeholder="Tab页" size="small" style="width:180px"/>
                                 
                  <el-select v-if="type == 0 " v-model="item.chartids" multiple collapse-tags filterable placeholder="请选择" style="width:400px;">
                    <el-option
                      v-for="item in chartList"
                      :key="item.customId"
                      :label="item.layerName"
                      :value="item.customId">
                    </el-option>
                  </el-select>

                  <el-select v-if="type == 1 " v-model="item.chartid" style="width:380px;" placeholder="请选择">
                    <el-option
                      v-for="item in chartList"
                      :key="item.customId"
                      :label="item.layerName"
                      :value="item.customId">
                    </el-option>
                  </el-select>
               
                  <!-- <el-select v-model="item.animate" placeholder="请选择" style="width:280px">
                    <el-option
                      v-for="item in animateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select> -->
                
                <div class="close-btn select-line-icon" @click="removeSelectItem(index)">
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
             </draggable>
            <div style="margin-left: 20px;">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
                添加选项
              </el-button>
            </div> 

          </el-collapse-item>

          <el-collapse-item title="自动轮播" name="5">

          <el-form-item v-if="configData.chartOption.isRotation!==undefined" label="是否自动轮播">
            <el-switch v-model="configData.chartOption.isRotation" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.dur !==undefined" label="间隔时长">
            <el-input-number v-model="configData.chartOption.dur" controls-position="right"  :step="1000"></el-input-number>
          </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="动画" name="6">
            <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
              <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                <el-option
                  v-for="item in animateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="数据源类型">
            <el-select v-model="configData.chartOption.dataSourceType" placeholder="请选择">
                <el-option
                  v-for="item in dataSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

        <Databasewebsocket v-show="configData.chartOption.dataSourceType === 'websocket'" 
          :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></Databasewebsocket>
          
          <el-form-item v-show="configData.chartOption.dataSourceType === 'static'" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <api-source v-show="configData.chartOption.dataSourceType === 'url'" 
            :interfaceUrl="interfaceUrl" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout"
            @changeApi="changeApi" ></api-source>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>

        <!-- 组件交互 -->
        <el-form v-show="currentTab === 'interaction'" size="small" label-width="90px">

          <el-form-item  label="是否开启图表远程控制">
              <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.isRemote === true" label="生成键值">
            <el-button type="primary" @click="createKey()">生成键值</el-button>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.isRemote === true" label="键值">
            <span style="word-wrap: break-word;"> {{configData.chartOption.remoteKey}}</span>
            <el-button type="primary" @click="docopy(configData.chartOption.remoteKey)" style="margin-left:10px" v-show="configData.chartOption.remoteKey !== undefined">复制键值</el-button>
          </el-form-item>

          <el-form-item  label="是否接受图表远程控制">
              <el-switch v-model="configData.chartOption.isControl" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.isControl === true" label="绑定键值">
              <el-input v-model="controlKey" placeholder="请输入绑定键值" @blur.prevent="changeControlKey()"/>
          </el-form-item>

        </el-form>


        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>

      </el-scrollbar>
    </div>

    </el-dialog>
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import VueEvent from '@/views/tool/datav/VueEvent'
import draggable from 'vuedraggable'
import { listUpload, fileUpload, delUpload } from "@/api/tool/datav/fileUpload";
import ImageGallary from './imageGallary/imageGallary'
import { dataSourceOptions, dataBaseOptions } from '../../ComponentsConfig'
import Databasewebsocket from './chartDB/Databasewebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import ApiSource from './chartDB/ApiSource'

export default {
  components: {
    draggable,
    ImageGallary,
    Databasewebsocket,
    DataEditor,
    ApiSource
  },
  props: ["costomData","drawingList"],
  data() {
    return {
      basePath: process.env.VUE_APP_BASE_API,
      fontFamilys:this.fontFamilys,
      fontWeights:['normal','bold','bolder','lighter'],
      activeNames: ['1'],
      currentTab: 'field',
      type: 0,
      configData: this.costomData,
      chartList: this.drawingList,
      animateOptions,
      dataSourceOptions,
      dataBaseOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '123',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      controlKey: "",
      aceKey:Math.random(),
      open:false,
    }
  },
  //页面加载完执行
  mounted() {

    //清除组件列表中选项卡
    let chartList = JSON.parse(JSON.stringify(this.drawingList));
    for(let index in chartList){
      if(chartList[index].chartType == "tab"){
          chartList.splice(index, 1)
      }else if(chartList[index].chartType == "group"){
          chartList.splice(index, 1)
      }
      
    }
    this.chartList = chartList;

    if(this.costomData.chartOption.bindingObjs.length > 0){
      for(const obj of this.costomData.chartOption.bindingObjs){
        //判断原有选项卡绑定单个组件设置标识为1，新建绑定栏目依然为单个组件
        //新创建的选项卡改为可绑定多个组件
        if(obj.chartid != ""){
          this.type = 1 ;
        }
      }
    }

  },
  computed: {
    
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
        this.controlKey = newVal.chartOption.controlKey;
      }
    },

  },
  methods: {
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
          //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(this.staticDataValue));
      } else {
          //this.configData.interfaceURL = this.staticDataValue;
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, 'interfaceURL', this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(this.configData.chartOption, 'requestParameters', this.requestParameters);
    },
    addSelectItem(){
      this.configData.chartOption.bindingObjs.push({
        bindid: '',
        chartid: '',
        // animate: '',
        chartids: []
      })
    },
    removeSelectItem(index){
      //获取恢复展示组件id
      const tabItem = this.configData.chartOption.bindingObjs[index];
      //解除绑定判断是单个组件还是多个组件，如果多个组件循环发送请求
      if(typeof tabItem.chartids != "undefined" && tabItem.chartids != ''){
        tabItem.chartids.forEach(element => {
          //向父组件发送请求
          VueEvent.$emit('removetab',element);
        });
      }else{
        //向父组件发送请求
          VueEvent.$emit('removetab',tabItem.chartid);
      }

      //删除动态表格行内容
      this.configData.chartOption.bindingObjs.splice(index, 1);

    },
    //复制key的方法
    docopy(text){
      this.$copyText(text).then(msg => {
        this.msgSuccess('复制成功')
      }).catch(err =>{
        console.log("copy.err",err)
        this.msgError('复制失败')
      })
    },
    createKey(){
      function S4() {
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
      }
      let key = (S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4());
      this.$set(this.configData.chartOption, 'remoteKey', key);
    },
    changeControlKey(){
      this.$set(this.configData.chartOption, 'controlKey', this.controlKey);
    },
    getNormalBg(val){
       this.$set(this.configData.chartOption, 'normalTabBG',  val);
    },
    getSelectedBg(val){
       this.$set(this.configData.chartOption, 'selectedTabBG', val);
    },
    getInterfaceKey(val){
      this.$set(this.configData.chartOption, 'interfaceKey', val);
    },
    changeApi(val){
      if(val.type == "interfaceUrl"){
        this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
      }else if(val.type == "requestParameters"){
        this.$set(this.configData.chartOption, 'requestParameters', val.arr);
      }else if(val.type == "requestMethod"){
        this.$set(this.configData.chartOption, 'requestMethod', val.arr);
      }else if(val.type == "token"){
        this.$set(this.configData.chartOption, 'token', val.arr);
      }else if(val.type == "timeout"){
        this.$set(this.configData.chartOption, 'timeout', val.arr);
      }
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
/deep/ .select-item .el-input--medium .el-input__inner {
    height: 32px;
    
}
.el-form-item__label{
  width:30px
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

/deep/ .center-tabs .el-tabs__item {
    width: 25%;
    text-align: center;
}

</style>